<template>
	<view class="content">
		<!-- 转盘 -->
		<view class="zhuanpan-beijing flex-row">
			<view :animation="rotate" class="zhuanpan"></view>
			<image @click="start" class="zhuanpan-start" src="/static/imgs/wuxinghaoping/start.png"></image>
		</view>
		<!-- 规则说明 -->
		<view class="rule">
			<view class="rule-title flex-row">抽奖规则</view>
			<view class="rule-content">
				<text>1、本次活动是为了回馈广大的用户而发起的，如您幸运中奖后请您在中奖页面填写正确的信息(姓名、电话及地址)，以便我们的工作人员与您联系，公布结果及确认获奖者身份；</text>
				<text>2、下述活动同一用户当天只有1次参与机会(同一微信报修单号、手机号、姓名、地址视为同一用户)，中将结果均以DMS网点公布及电话回访为准。奖品以快递方式寄出，维修完成后24小时内完成评价，逾期视同自动放弃；</text>
				<text>3、活动时间为2024年3月1日—12月31日，每日仅能参与一次抽奖活动，重复抽奖和中奖视为无效。此活动只限于保内车辆微信报修客户参与且与索赔单据信息一致并审核通过，服务站及维修人员等参与无效，联合重卡拥有最终解释权。</text>
			</view>
		</view>
		<!-- 抽奖结果 -->
		<view class="mask flex-row" :style="{top:mask_top}">
			<view class="mask-wrap flex-row">
				<view class="mask-model">
					<view class="award">
						<view v-if="awardComponentnum != null && awardComponentnum === ''"
							class="award-xxcy flex-column">
							<image src="/static/imgs/wuxinghaoping/xxcy.png"></image>
							<view class="award-xxcy-tip flex-row">本次抽奖未获得礼品</view>
						</view>
						<view v-if="awardComponentnum != null && awardComponentnum !== ''" class="award-zj flex-column">
							<image class="award-zj-tip" src="/static/imgs/wuxinghaoping/gxhd.png"></image>
							<view class="award-zj-info flex-column" :src="awardImg">
								<image class="award-zj-img" :src="awardImg"></image>
								<view class="award-zj-desc">{{this.awardName}}</view>
							</view>
						</view>
					</view>
					<view class="award-button" @click="maskClick">
						{{this.awardComponentnum !== '' ? '领取':'确认'}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodId: this.$route.query.id, //上一个页面传来的线上评价表ID
				awardId: '', //奖品清单表ID
				drawInfoId: '', //抽奖信息表ID
				rotate: 0, //度数
				turning: false, //转盘是否在转
				isShowAward: 0, //是否显示奖品弹框
				awardComponentnum: '', //抽到的奖品物料号
				awardName: '', //奖品名称
				awardImg: '', //奖品图片地址
				mask_top: '200%',
			}
		},
		onUnload() {
			console.log("onUnload..");
			uni.navigateBack({
				url: "/pages/mytable/fwb_turnable_lottery/fwb_turnable_lottery"
			})
		},
		onBackPress(){
			return true
		},
		mounted() {
			// 	隐藏导航条上的返回按钮
			let backButton = document.getElementsByClassName('uni-page-head-hd')[0];
			backButton.style.display = 'none';
		},
		methods: {
			//点击按钮，开始抽奖
			start() {
				if (!this.turning) {
					this.turning = true;
					this.$nextTick(() => {
						let url = "/api/fwb_turnable_lottery/getAwardInfo?goodId=" + this.goodId
						this.http.post(url, {}, true).then((s) => {
							this.awardId = s[0]
							this.awardImg = encodeURI(this.http.ipAddress + s[3])
							this.awardName = s[1]
							this.drawInfoId = s[4]
							let componentnum = s[2] === null ? '' : s[2]
							let rotateAngle = this.rotateAward(componentnum, 1)
							let animation = uni.createAnimation({
								duration: 4000,
								timingFunction: 'ease-out'
							})
							animation.rotate(rotateAngle).step()
							this.rotate = animation.export()
							setTimeout(() => {
								this.mask_top = '0rpx'
								let animation1 = uni.createAnimation({
									duration: 50,
									timingFunction: 'linear'
								})
								animation1.rotate(0).step()
								this.awardComponentnum = componentnum
								this.isShowaward = true
								this.$nextTick(() => {
									setTimeout(() => {
										this.rotate = animation1.export()
										this.turning = false
									}, 1000)
								})
							}, 4000)
						})
					})
				}
				//TODO 数据传到后台
			},

			//componentnum为奖品物料号
			rotateAward(componentnum) {
				let angle;
				switch (componentnum) {
					case '':
						angle = 0
						break
					case '150800000035AA0A':
						angle = 40
						break
					case '150800000015AA0A':
						angle = 80
						break
					case '150800000012AA0A':
						angle = 120
						break
					case '150800000141AA0A':
						angle = 160
						break
					case '150800000106AA0A':
						angle = 200
						break
					case '150800000140AA0A':
						angle = 240
						break
					case '150800000028AA0A':
						angle = 280
						break
					case '150800000027AA0A':
						angle = 320
						break
					default:
						angle = 0
						break
				}
				//先转6圈，后续角度根据奖品而定
				return 6 * 360 + angle
			},

			//抽奖结束，点击按钮，隐藏遮罩，跳转至住址填写界面
			maskClick() {
				this.mask_top = '200%'
				if (this.awardComponentnum !== '') {
					uni.navigateTo({
						url: "/pages/mytable/fwb_turnable_lottery/fwb_receive_info?id=" + this.drawInfoId
					})
				} else {
					uni.navigateTo({
						url: "/pages/mytable/fwb_turnable_lottery/fwb_back"
					})
				}
			},
		}
	}
</script>

<style scoped>
	.flex-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.flex-column {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.content {
		width: 100%;
		box-sizing: border-box;
	}

	.zhuanpan-beijing {
		background-image: url('/static/imgs/wuxinghaoping/zhuanpanchoujiang_beijing.png');
		width: 630rpx;
		height: 630rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin: 25rpx auto;
		position: relative;
	}

	.zhuanpan {
		background-image: url('/static/imgs//wuxinghaoping/jiangpin.png');
		width: 580rpx;
		height: 580rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.zhuanpan-start {
		width: 150rpx;
		height: 180rpx;
		position: absolute;
		z-index: 1;
	}

	.rule {
		position: relative;
		width: 100%;
		box-sizing: border-box;
	}

	.rule-title {
		font-size: 28rpx;
		color: #000;
		height: 40rpx;
		width: 100%;
		margin: 20rpx auto 0rpx;
		width: 580rpx;
	}

	.rule-content {
		margin: 10rpx auto;
		width: 580rpx;
	}

	.rule-content text {
		font-size: 28rpx;
		color: #980100;
		text-align: justify;
		display: block;
	}

	.mask {
		opacity: 1;
		position: fixed;
		left: 0rpx;
		top: 100%;
		right: 0rpx;
		bottom: 0rpx;
		background: rgba(0, 0, 0, 0.64);
		z-index: 2;
		transition-duration: 0.2s;
		transition-property: all;
		transition-timing-function: ease-in;
	}

	.mask-wrap {
		min-width: 100rpx;
		min-height: 100rpx;
		overflow: hidden;
	}

	.mask-model {
		width: 630rpx;
		height: 590rpx;
		position: relative;
		box-sizing: border-box;

	}

	.award {
		background-image: url('/static/imgs/wuxinghaoping/award_background.png');
		width: 100%;
		height: 530rpx;
		background-size: 100% 100%;
	}

	.award-button {
		background-image: url('/static/imgs//wuxinghaoping/anniu.png');
		width: 336rpx;
		height: 120rpx;
		position: absolute;
		bottom: 0rpx;
		left: calc(50% - 168rpx);
		font-size: 40rpx;
		color: #980100;
		line-height: 120rpx;
		text-align: center;
		background-size: 100% 100%;
	}

	.award-xxcy image {
		width: 400rpx;
		height: 148rpx;
		margin-top: 140rpx;
	}

	.award-xxcy-tip {
		width: 510rpx;
		height: 100rpx;
		background: #FEF2CD;
		border-radius: 20rpx;
		font-size: 30rpx;
		color: #D93637;
		margin-top: 43rpx;
	}

	.award-zj-tip {
		width: 347rpx;
		height: 106rpx;
		margin-top: 45rpx;
	}

	.award-zj-info {
		width: 480rpx;
		height: 280rpx;
		background: #FEF2CD;
		border-radius: 20rpx;
		margin-top: 5rpx;
	}

	.award-zj-img {
		margin-top: 5rpx;
		width: 200rpx;
		height: 200rpx;
	}

	.award-zj-desc {
		font-size: 40rpx;
		color: #D93637;
	}
</style>